<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title>My first three.js app</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% }
	</style>
</head>
<body>
	<script src="js/three.js"></script>
	<script>
		// Our Javascript will go here.
		// 场景
		var scene = new THREE.Scene();

		// 相机（视野角度（FOV）， 长宽比（aspect ratio）， 远剪切面， 近剪切面）
		// 当物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。
		var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

		// 渲染器：除了我们在这里用到的WebGLRenderer渲染器之外，
		// Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，
		// 可以使用这几种渲染器进行降级。
		var renderer = new THREE.WebGLRenderer();

		// 设置一个渲染器的大小尺寸
		// 对于性能比较敏感的应用程序来说，你可以给setSize传入一个较小的值，
		// 例如window.innerWidth/2和window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。
		renderer.setSize( window.innerWidth, window.innerHeight );

		// 最后，我们将renderer（渲染器）这个元素添加到我们的HTML文档中，
		// 这也就是渲染器使用<canvas>元素来将场景展现给我们。
		document.body.appendChild( renderer.domElement );

		// 要创建一个立方体，我们需要一个BoxGeometry（立方体）对象
		var geometry = new THREE.BoxGeometry( 1, 1, 1 );

		// 给它一个材质，来让它有颜色
		var material = new THREE.MeshBasicMaterial( { color: 0xdddddd } );

		// 我们需要一个Mesh（网格）。
		// 网格是包含有一个几何体以及应用在在此几何体上的材质的对象，
		// 我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。
		var cube = new THREE.Mesh( geometry, material );

		// 默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。
		scene.add( cube );

		// 但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。
		// 为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
		camera.position.z = 5;

		function animate() {
			// requestAnimationFrame 类似 setInterval，
			// 通过屏幕帧数渲染新样式形成动画循环，
			// 切换其他标签时动画就会暂停从而比 setInterval 更省资源
			requestAnimationFrame( animate );

			// 操作每帧的变化
			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;

			renderer.render( scene, camera );
		}

		animate();

	</script>
</body>
</html>
